<template>
    <div>
        <div class="e-h-400" :id="id"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    props: {
        id: '',
        data: []
    },
    mounted() {
        var chartDom = document.getElementById(this.id);
        var myChart = echarts.init(chartDom);
        var option;

        //获取数据
        var seriesdata = []
        if(this.data && this.data.length > 0){
            this.data.forEach((item) => {
                seriesdata.push({
                    value: item.count,
                    name: item.name
                })
            })
        }

        option = {
            title: {
                text: '区域订单分布',
                subtext: '各区域占比',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                // orient: 'vertical',
                // left: 'left'，
                // x:'center',
                y:'bottom'
                
            },
            series: [
                {
                    name: '回收单数',
                    type: 'pie',
                    radius: '50%',
                    data: seriesdata,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    }
}
</script>

<style lang="scss" scoped>

</style>